import React, { useState } from 'react'
import "./css/BaseLayout.less";
import { Layout, Menu, Dropdown, Avatar } from "antd";
import BaseSiderBar from '@/components/BaseSiderBar/BaseSiderBar';
import BaseHeaderBar from '@/components/BaseHeaderBar/BaseHeaderBar';
import NotFound from "@/pages/404.js";
import { history, useDispatch, useSelector } from "umi"
const { Sider, Header, Content } = Layout;
export default function BaseLayouts({ children }) {
    // 处理Icon方向设置一变量
    const { CollArrow } = useSelector(state => state.common)
    const dispatch = useDispatch();
    const changeArrow = () => {
        dispatch({
            type: "common/changeColl",
            payload: !CollArrow
        })
    };
    // 获取路由表
    const routeList = JSON.parse(localStorage.getItem("routeList"));
    const location = history.location;
    // 处理/
    function IsChangeLink() {
        if (location.pathname === "/") {
            history.push(routeList[0].route);
        }
        const isLinkCorrect = routeList.some(el => el.route === location.pathname)
        if (!isLinkCorrect) {
            return <NotFound></NotFound>
        }
        return children;
    }
    return (
        <Layout className='container'>
            <BaseSiderBar CollArrow={CollArrow} Menu={Menu} Sider={Sider}></BaseSiderBar>
            <Layout>
                <BaseHeaderBar
                    Avatar={Avatar}
                    Header={Header}
                    CollArrow={CollArrow}
                    changeArrow={changeArrow}
                    Dropdown={Dropdown}></BaseHeaderBar>
                <Content className='container'>{IsChangeLink()}</Content>
            </Layout>
        </Layout>

    )
}
